<template>
  <div>
    <el-card shadow="always">
      <span class="back" @click="goback">返回</span>
      <div class="mb30">
        <el-button size="mini" type="primary" @click.stop="addSku">
          <i class="el-icon-circle-plus-outline" style="margin: 0 auto"></i
          >添加sku
        </el-button>
        <div class="floatRight">
          <div><span style='font-weight:700'>单位：</span><span>{{info.company_title}}</span></div>
          <div><span style='font-weight:700'>代办类型：</span><span>{{info.expenseCate_title}}</span></div>
        </div>
      </div>
      <el-table :data="goodsDetailInfo" style="width: 100%" border>
        <el-table-column type="index" label="#" width="180"> </el-table-column>
        <el-table-column prop="daysNum" label="天数" width="180">
        </el-table-column>
        <el-table-column prop="priceDel" label="划线价格(元)" width="180">
        </el-table-column>
        <el-table-column prop="priceReal" label="真实价格(元)">
        </el-table-column>
        <el-table-column label="分润比例(%)" prop='distribution'></el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-tooltip
              effect="dark"
              content="编辑sku"
              placement="top"
              :enterable="false"
            >
              <el-button
                size="mini"
                type="warning"
                @click.stop="editSku(scope.row.id)"
              >
                <i class="el-icon-edit" style="margin: 0 auto"></i>
              </el-button>
            </el-tooltip>
            <el-tooltip
              effect="dark"
              content="编辑分润"
              placement="top"
              :enterable="false"
            >
              <el-button
                size="mini"
                type="primary"
                @click.stop="editFr(scope.row.id)"
              >
                <i class="el-icon-edit-outline" style="margin: 0 auto"></i>
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 提交sku -->
    <el-dialog
      title="提交sku"
      :visible.sync="subSkuDialogVisible"
      width="30%"
      center
      @close="subSkuClose"
    >
      <div class="dialog-content-wrap">
        <el-form
          ref="subSkuFormRef"
          :model="subSkuForm"
          label-width="80px"
          :rules="subSkuRules"
          label-position="left"
        >
          <el-form-item label="天数" prop="daysNum">
            <el-input v-model="subSkuForm.daysNum"></el-input>
          </el-form-item>
          <el-form-item label="划线价格" prop="priceDel">
            <el-input v-model="subSkuForm.priceDel"></el-input>
          </el-form-item>
          <el-form-item label="真实价格" prop="priceReal">
            <el-input v-model="subSkuForm.priceReal"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="subSkuDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="subSku">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑sku -->
    <el-dialog
      title="编辑sku"
      :visible.sync="editSkuDialogVisible"
      width="30%"
      center
    >
      <div class="dialog-content-wrap">
        <el-form
          ref="editSkuInfoRef"
          :model="editSkuInfo"
          label-width="120px"
          label-position="left"
        >
          <el-form-item label="天数(天)">
            <el-input v-model="editSkuInfo.daysNum"></el-input>
          </el-form-item>
          <el-form-item label="划线价格(元)">
            <el-input v-model="editSkuInfo.priceDel"></el-input>
          </el-form-item>
          <el-form-item label="真实价格(元)">
            <el-input v-model="editSkuInfo.priceReal"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editSkuDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="trueEdit">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑分润 -->
    <el-dialog
      title="编辑分润"
      :visible.sync="editFrDialogVisible"
      width="30%"
      center
    >
      <div class="dialog-content-wrap">
        <div>
          分润比例：  
          <el-input size="small" type='number' placeholder="请输入分润比例" v-model="distribution" style="width:180px;" @input='distributionInput'>
            <template slot="append"><span style="font-size:19px;font-weight:700;">%</span></template>
          </el-input>
        </div>
        
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editFrDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="trueEditFr">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { get } from "../../../../../public/API/query";
import config from "../../../../../public/config";
export default {
  data() {
    const blurText = async (rule, value, callback) => {
      // const reg = /^\-\d\.?\d*$/
      // const boolean = reg.test(value)
      const boolean = new RegExp("^[1-9][0-9]*$").test(value); // console.log(boolean)
      if (!boolean) {
        this.$message.warning("请输入正整数");
        this.subSkuForm.daysNum = "";
      }
    };
    const price = (rule, value, callback) => {
      const reg = /^\d+.?\d{0,2}$/;
      if (!value) {
        callback(new Error("请输入价格"));
      } else if (!Number(value)) {
        callback(new Error("请输入数字值"));
      } else {
        if (reg.test(value)) {
          callback();
        } else {
          callback(new Error("小数点后最多只能输入两位"));
        }
      }
    };
    return {
      num: 1,
      id: "",
      goodsDetailInfo: [],
      subSkuDialogVisible: false,
      editSkuDialogVisible: false,
      editFrDialogVisible: false,
      editSkuInfo: {},
      subSkuForm: {
        id: "",
        daysNum: "",
        priceDel: "",
        priceReal: "",
      },
      subSkuRules: {
        daysNum: [
          { required: true, message: "请输入天数", trigger: "blur" },
          { validator: blurText, trigger: "blur" },
        ],
        priceDel: [
          { required: true, message: "请输入划线价格", trigger: "blur" },
          { validator: price, trigger: "blur" },
        ],
        priceReal: [
          { required: true, message: "请输入真实价格", trigger: "blur" },
          { validator: price, trigger: "blur" },
        ],
      },
      distribution:0,
      info:{},
      frInfo:{},
      frID:''
    };
  },
  filters: {
    bl(value) {
      // (-(-value)/100).toFixed(2)
      return value + "%";
    },
  },
  methods: {
    trueEditFr() {
      get('operate/commodity/commodityprice/profitsharingSub',{id:this.frID,distribution:(this.distribution/100)},res=>{
        if(res.code == 200){
          this.$message.success('编辑分润成功')
          this.getDetailInof()
          this.editFrDialogVisible = false;
        }else{
          this.$message.success('编辑分润失败')
        }
      })
    },
    editFr(id) {
      this.frID = id
      get('operate/commodity/commodityprice/profitsharingEdit',{id},res=>{
        this.frInfo =res.data.info
        this.distribution = res.data.info.distribution*100
      })
      this.editFrDialogVisible = true;
    },
    trueEdit() {
      let params = {
        daysNum: this.editSkuInfo.daysNum,
        priceDel: this.editSkuInfo.priceDel,
        priceReal: this.editSkuInfo.priceReal,
        id: this.id,
      };
      get("operate/commodity/commodityprice/subSku", params, (res) => {
        this.editSkuDialogVisible = false;
        res.code == 200 ? this.$message.success("修改成功") : "";
        this.getDetailInof();
      });
    },
    getDetailInof() {
      get(
        "operate/commodity/commodityprice/commodDetail",
        { id: this.id },
        (res) => {
          if (res.code == 200) {
            this.goodsDetailInfo = res.data.expenseCateCompanyPrice;
            this.goodsDetailInfo.forEach(item=>{
              item.distribution *=100
            })
            this.info = res.data.info
          }
        }
      );
    },
    goback() {
      this.$router.back();
    },
    // 添加sku
    addSku() {
      this.subSkuDialogVisible = true;
    },
    subSku() {
      this.$refs["subSkuFormRef"].validate((valid) => {
        if (valid) {
          get(
            "operate/commodity/commodityprice/skuSub",
            {
              id: this.id,
              daysNum: this.subSkuForm.daysNum,
              priceDel: this.subSkuForm.priceDel,
              priceReal: this.subSkuForm.priceReal,
            },
            (res) => {
              if (res.code == 200) {
                get(
                  "operate/commodity/commodityprice/skuAddPage",
                  { id: this.id },
                  (res) => {
                    if (res.code == 200) {
                      this.$message.success("添加成功！");
                    }
                  }
                );
                this.subSkuDialogVisible = false;
                this.getDetailInof();
              }
            }
          );
        }
      });
    },
    // 编辑sku页
    editSku(id) {
      this.editSkuDialogVisible = true;
      this.subSkuForm.id = id;
      get("operate/commodity/commodityprice/skuEdit", { id }, (res) => {
        this.editSkuInfo = res.data.info;
      });
    },
    subSkuClose() {
      this.subSkuForm = {};
    },
    distributionInput(){
      this.distribution>100?this.distribution=100:this.distribution;
      this.distribution<0?this.distribution=0:this.distribution;
    }
  },
  created() {
    this.id = this.$route.params["id"];
    if (this.id) {
      this.getDetailInof();
    }
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
.dialog-content-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}
.mb30 {
  margin-bottom: 30px;
}
.back {
  font-weight: 600;
  margin-bottom: 30px;
  &:hover {
    cursor: pointer;
    color: #409eff;
  }
}
.floatRight{
  float:right;
  margin-right:50%;
  transform: translateX(50%);
}
 /deep/ input::-webkit-outer-spin-button,
   /deep/ input::-webkit-inner-spin-button {
      -webkit-appearance: none !important;
    }
   /deep/ input[type='number'] {
      -moz-appearance: textfield !important;
    }
</style>
